<template>
    <div>
         <div id="map" class="map"></div>
    </div>
</template>
<script>
// 映入css文件、
import 'ol/ol.css';
import '../utils/openlayers/css/OverviewMap.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ';
// 比例尺
import ScaleLine from 'ol/control/ScaleLine';
// 地图服务
import {tiandituVetorMap,tiandituImgMap} from "../utils/openlayers/js/mapServer"
export default {
    props:["zoom","center","isShowBaseMap","isScaleLine"],
    data(){
        return{
            map:null
        }
    },
    mounted(){
        this.initMap();
    },
    methods:{
        initMap(){
            this.map = new Map({
                target: 'map',
                view: new View({
                    projection: 'EPSG:4326',
                    center:this.center || [0, 0],
                    zoom: this.zoom || 2
                }),
            });
            if(this.isShowBaseMap)
                tiandituImgMap(this.map)
                // this.showTianDiTu();
            if(this.isScaleLine)
                this.showScaleLine();
        },
        // 显示矢量天地图数据
        showTianDiTu(){
            /**
             * 加载天地图的矢量图层
             */
            var TiandiMap_vec = new TileLayer({
            name: '天地图矢量图层',
                source: new XYZ({
                    url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d', //mapkey为天地图密钥
                    wrapX: false,
                    //设置crossOrigin
                  
                }),
            });
            /**
             * 添加天地图适量的标注信息
             */
            var TiandiMap_cva = new  TileLayer({
            name: '天地图矢量注记图层',
                source: new XYZ({
                    // 设置crossOrigin
                    // crossOrigin: 'anonymous',
                    url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d', //mapkey为天地图密钥
                    wrapX: false,
                }),
            });
            this.map.addLayer(TiandiMap_vec);
            this.map.addLayer(TiandiMap_cva);
        },
        // 显示比例尺
        showScaleLine:function(){
             //实例化比例尺控件（ScaleLine）
            var scaleLineControl = new ScaleLine({
                //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
                units: "metric"
            });
            this.map.addControl(scaleLineControl)
        }
    }
}
</script>
<style>
    .map{
        width: 100%;
        height:70%;
    }
   
</style>


